import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withConsumer } from '../../../context';
import styles from './index.module.scss';
import classNames from 'classnames';
import { FragmentCode } from '@/components/basicComp/FragmentCode';
import Header from './Header';
import { update } from '@/utils/immutableUtil';
import * as Tabs from '@radix-ui/react-tabs';

import Fragment from './Fragment';
import list from './code';
import Thinking from './Thinking';
import ep from '@/utils/eventproxy';
import MdThemeStyle from '@/components/basicComp/MdThemeStyle';

@withConsumer
@connect(({ ppt }) => ({
  openPreview: ppt.openPreview,
  editMode: ppt.editMode,
}))
class Comp extends Component {
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  containerRef = React.createRef();
  state = {
    title: '强化学习: 基础与应用 - 《Reinf',
    list: list,
    containerWidth: null,
  };

  componentDidMount() {
    setTimeout(() => {
      this.setWidth();
    }, 300);
    ep.on('setSidebar', this.setSidebar);
    window.addEventListener('resize', this.setWidth);
  }

  componentWillUnmount() {
    ep.removeListener('setSidebar', this.setSidebar);
    window.removeEventListener('resize', this.setWidth);
  }

  setSidebar = () => {
    setTimeout(() => {
      this.setWidth();
    }, 300);
  };

  setWidth = () => {
    const container = this.containerRef.current;
    if (!container) return;
    // 计算宽度
    this.setState({ containerWidth: container.offsetWidth });
  };

  render() {
    const {
      editMode,
      value: { changeState },
    } = this.props;
    const { list, containerWidth } = this.state;

    var openPreview = true;

    return (
      <div
        className={classNames([
          styles.preview,
          openPreview ? styles.previewOpen : '',
        ])}
      >
        <MdThemeStyle />
        <Header
          onClose={() => {
            changeState({ openPreview: false });
          }}
        />

        <div className={styles.container}>
          <div className={styles.body}>
            <div ref={this.containerRef} style={{ width: '100%' }}></div>
            {containerWidth && (
              <>
                {list.map((item, i) => {
                  return (
                    <div className={styles.item}>
                      <div className={styles.headerTop}>
                        <Tabs.Root
                          className={styles.tabsRoot}
                          value={item.type}
                          onValueChange={(v) => {
                            item.type = v;
                            this.forceUpdate();
                          }}
                        >
                          <div className={styles.tabsHeader}>
                            <Tabs.List
                              className={styles.tabsList}
                              aria-label="Manage your account"
                            >
                              <Tabs.Trigger
                                className={styles.tabsTrigger}
                                value="1"
                              >
                                知识
                              </Tabs.Trigger>
                              <Tabs.Trigger
                                className={styles.tabsTrigger}
                                value="2"
                              >
                                代码
                              </Tabs.Trigger>
                              <Tabs.Trigger
                                className={styles.tabsTrigger}
                                value="3"
                              >
                                思考过程
                              </Tabs.Trigger>
                            </Tabs.List>
                            <div className={styles.tabsActions}>
                              <button
                                className={classNames([
                                  styles.actionButton,
                                  this.props.editMode
                                    ? styles.actionButtonActive
                                    : '',
                                ])}
                                onClick={() => {
                                  var editMode = !this.props.editMode;
                                  changeState({ editMode: editMode });
                                  if (!editMode) {
                                    changeState({
                                      pptSetTextOpen: false,
                                      pptSetBoxOpen: false,
                                      pptSetTextData: {},
                                    });
                                  }
                                }}
                              >
                                <i className="iconfont icon-xuanzebianji"></i>
                                {this.props.editMode ? '退出编辑' : '选择编辑'}
                              </button>
                            </div>
                          </div>
                        </Tabs.Root>
                        <div className={styles.pagination}>
                          <span>
                            {i + 1} / {list.length}
                          </span>
                        </div>
                      </div>
                      <div className={styles.content}>
                        <div
                          style={{ display: item.type == 1 ? 'block' : 'none' }}
                        >
                          <Fragment
                            list={list}
                            index={i}
                            data={item}
                            containerWidth={containerWidth}
                            editMode={editMode}
                          />
                        </div>

                        <div
                          style={{ display: item.type == 2 ? 'block' : 'none' }}
                        >
                          <>
                            {item.code && (
                              <div className={styles.code}>
                                <FragmentCode
                                  files={[
                                    {
                                      name: 'index.html',
                                      content: item.newCode || item.code,
                                    },
                                  ]}
                                />
                              </div>
                            )}
                          </>
                        </div>

                        <div
                          style={{ display: item.type == 3 ? 'block' : 'none' }}
                        >
                          <Thinking thinking={item.thinking} />
                        </div>
                      </div>
                    </div>
                  );
                })}
              </>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Comp;
